<template>
	<comHead  :datas="datasObj"></comHead>

	<view class="notice page pd-30" v-if="Object.keys(msgDetail).length > 0">
		<view class="msgList flex">
			<view class="card pd-20" v-if="msgDetail.type == 3">
				<view class="flex-bwt">
					<view class="ft1">{{ msgDetail.detail_title }}</view>
					<view class="share flex"
						style="width: 116rpx;height: 52rpx;background: #FFFFFF;border-radius: 40rpx;"
						@click="triggerShare">
						<image class="wh-32 ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/shareIcon.png">
						</image>
						<text class="ft ml-10">{{ '分享' }}</text>
						<!-- 隐藏的原生分享按钮 -->
						<button open-type="share" class="hidden-share-btn" @click="triggerShare"></button>
					</view>
				</view>
				<view class="ft mt-24 c-99">{{ msgDetail.created_at }}</view>
				<!-- 			  <view class="ft mt-20 c-99">{{ '购物商城年终活动来袭！超多优惠商品，精彩互动游戏，丰厚奖品等你。快来畅享购物盛宴，迎接新一年。' }}</view>
			  <view class="pic mt-20"></view> -->
				<rich-text
					:nodes="msgDetail.detail_content.replace(/<img\b/gi, '<img style=max-width:100%;height:auto;display: block;')"
					class="ft  mt-20 c-99" style="line-height: 46rpx;"></rich-text>
				<view class="text ft mt-40 c-99">{{ "参加活动请点击" }}</view>
				<!-- <view class="btnNew  flex-center ft1 c-ff" @click="goActDetail(msgDetail.mark_id)">我要参与</view> -->
				<view class="btnNew  flex-center ft1 c-ff" @click="goPage(msgDetail.url)" v-if="msgDetail.url">我要参与
				</view>
			</view>
			<view class="card pd-20" v-else>
				<view class="ft1">{{ msgDetail.detail_title }}</view>
				<view class="ft mt-10 c-99">{{ msgDetail.created_at }}</view>
				<view class="ft mt-20 c-66">{{ msgDetail.detail_content }}</view>

				<template v-if="msgDetail.order_info">
					<view class="ft mt-10 c-66">{{ "订单编号为：" + msgDetail.order_info.ordernum }}</view>
					<view class="watch flex-center mt-20" @click="goOrderDetail(msgDetail.order_info.id)">
						<text class="ft">查看详情</text>
						<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
						</image>
					</view>
				</template>
				<template v-if="msgDetail.url">
					<view class="watch flex-center mt-20" @click="goPage(msgDetail.url)">
						<text class="ft">去查看</text>
						<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
						</image>
					</view>
				</template>
			</view>
		</view>
		<view style="height: 184rpx;"></view>
		<view class="btnGroup" v-if="!share_user_id">
			<view class="btn1 flex-eve">
				<view class="allClear flex-center" @click="showDelMsg = true">{{ "删除" }}</view>
				<view class="noRead flex-center" @click="goBack">{{ "返回" }}</view>
			</view>
		</view>
	</view>
	<up-modal width="518rpx" @confirm="delMsgConfirm" @cancel="delMsgCancel" contentTextAlign="center"
		:show="showDelMsg" :title="'删除消息'" :showCancelButton="true" :content="'确定要删除消息吗？'"></up-modal>
</template>

<script lang="js" setup>
import {
	ref,
	reactive
} from "vue";
import {
	onLoad,
	onReachBottom,
	onShareAppMessage,
	onShareTimeline
} from "@dcloudio/uni-app";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '通知详情',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
	isBorder: true
})
const msgDetail = ref({})
const share_user_id = ref('')
onLoad((options) => {
	share_user_id.value = options.share_user_id ? options.share_user_id : ''
	if (options.id) {
		utils
			.request(
				api.messageDetail, {
				id: options.id
			},
				"get"
			)
			.then((res) => {
				msgDetail.value = res.data.info
				// if (msgDetail.value.is_read == 0 && !share_user_id.value) {
				// 	//标记已读
				// 	utils
				// 		.request(
				// 			api.messageRead, {
				// 			id: msgDetail.value.id
				// 		},
				// 			"post"
				// 		).then((res) => { });
				// }

				shareConfig.value.title = msgDetail.value.detail_title
				initShareParams()
			});
	}
})
const goBack = () => {
	uni.navigateBack(-1)
}

const showDelMsg = ref(false)
const delMsgCancel = () => {
	showDelMsg.value = false
}
const delMsgConfirm = () => {
	showDelMsg.value = false
	utils
		.request(
			api.messageDelete, {
			id: msgDetail.value.id
		},
			"post"
		)
		.then((res) => {
			getApp().globalData.shouldRefresh = true;
			uni.navigateBack()
		});
}
const goOrderDetail = (id) => {
	uni.navigateTo({
		url: `/subpackage/orderList/orderDetail?id=${id}`,
	});
}
const goActDetail = (id) => {
	// uni.navigateTo({
	// 	url: `/subpackage/order/orderDetail?id=${id}`,
	// });
}

const goPage = (url) => {
	uni.navigateTo({ url: url })
}

// 响应式分享配置
const shareConfig = ref({
	title: '',
	path: '',
	imageUrl: '',
	queryParams: {} // 当前页面参数
})

// 获取页面栈实例
const currentPages = getCurrentPages()
const currentRoute = currentPages[currentPages.length - 1]

// 初始化分享参数
const initShareParams = () => {
	// 获取当前页面参数
	const query = currentRoute.options || {}
	if (!query.share_user_id) {
		const userInfo = uni.getStorageSync("userInfo")
		query.share_user_id = userInfo ? userInfo.id : ''
	}

	const queryString = Object.keys(query)
		.map(key => `${key}=${query[key]}`)
		.join('&')

	// 更新分享配置
	shareConfig.value = {
		...shareConfig.value,
		path: `${currentRoute.route}?${queryString}`,
		queryParams: query
	}
}

// 触发分享操作
const triggerShare = () => {
	initShareParams()
}

// 好友分享配置
onShareAppMessage(() => ({
	title: shareConfig.value.title,
	path: shareConfig.value.path,
	imageUrl: shareConfig.value.imageUrl,
	success(res) {
		uni.$emit('shareSuccess', {
			type: 'friend',
			data: shareConfig.value.queryParams
		})
	}
}))

// 朋友圈分享配置（需基础库2.11.3+）
onShareTimeline(() => ({
	title: shareConfig.value.title,
	query: shareConfig.value.path.split('?') || '',
	imageUrl: shareConfig.value.imageUrl
}))
</script>
<style lang="scss" scoped>
.msgList {
	flex-direction: column;
	justify-content: center;

	.card {
		width: 690rpx;
		background: #f8f8f8;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.btn {
		width: 170rpx;
		height: 54rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.btnGroup {
	width: 750rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #f8f8f8;
	padding-bottom: calc(0rpx + env(safe-area-inset-bottom));

	.btn1 {
		//border: 2rpx solid red;
		width: 750rpx;
		height: 118rpx;
		background: #f8f8f8;

		.allClear {
			width: 196rpx;
			height: 78rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}

		.noRead {
			width: 454rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #dbf046;
		}
	}
}

.watch {
	width: 650rpx;
	height: 74rpx;
	background: linear-gradient(180deg,
			rgba(255, 255, 255, 0) 0%,
			#ffffff 100%);
	border-radius: 0rpx 0rpx 40rpx 40rpx;
}

.text {
	width: 100%;
	text-align: center;
}

.btnNew {
	width: 448rpx;
	height: 78rpx;
	background: #333333;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: auto;
	margin-top: 24rpx;
}

.pic {
	width: 650rpx;
	height: 380rpx;
	background: linear-gradient(48deg, #F87A20 0%, rgba(248, 122, 32, 0.98) 49%, rgba(248, 122, 32, 0) 100%);
	border-radius: 40rpx 40rpx 40rpx 40rpx;
}

.share {
	position: relative;

	.hidden-share-btn {
		opacity: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
}
</style>